<template>
  <div class="sfs_row">
    <div class="explain">
      <p class="title" v-if="data.title">
        <span></span>
        {{ data.title }}
      </p>
      <p class="tips" v-if="data.tips">{{ data.tips }}</p>
      <ul v-if="data.list && data.list.length">
        <li v-for="(list, listIndex) in data.list" :key="listIndex">
          <span>-</span>
          {{ list }}
        </li>
      </ul>
    </div>
    <div class="example">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SfsRow',
  props: ['data'],
}
</script>

<style lang="less" scoped>
.sfs_row {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  &:last-child{
    .explain{
      padding-bottom: 80px;
    }
  }
  .explain {
    width: 30%;
    height: 100%;
    padding: 80px 20px 0px 80px;
    box-sizing: border-box;
    user-select: none;
    .title {
      display: flex;
      align-items: center;
      color: #1a1b1f;
      padding-bottom: 8px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #1a1b1f;
      line-height: 24px;
      font-weight: 500;
      border-bottom: 1px solid rgba(25,31,37,0.08);
      margin-bottom: 16px;
      & span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
        background-color: #1a1b1f;
      }
    }
    .tips {
      line-height: 24px;
      font-size: 14px;
      color: #646566;
    }
    li {
      font-size: 14px;
      color: #646566;
      line-height: 24px;
      & span {
        padding-right: 6px;
      }
    }
  }
  .example {
    width: 70%;
    height: 100%;
    padding: 80px 70px;
    box-sizing: border-box;
  }
}
</style>
